<template>
  <div style="width:400px">
    <header class="header">
      <slot name="header"></slot>
    </header>
    <main class="main">
      <div v-for="(item,index) in data">
        <slot :data="item" :index="index"></slot>
      </div>
    </main>
    <footer class="footer">
      <slot name="footer"></slot>
    </footer>
  </div>
</template>

<script setup lang=ts>
import {reactive} from "vue"
type names = {
  name: string,
  age: number
}

const data = reactive<names[]>([
  {
    name: "唐僧",
    age: 18
  },
  {
    name: "孙悟空",
    age: 600
  },
  {
    name: "猪八戒",
    age: 300
  },
  
])

</script>

<style scoped lang="less">

.header{
  height:200px;
  background: red;
  color: #fff
}
.main{
  height:200px;
  background: blue;
  color: #fff
}
.footer{
  height:200px;
  background: #ccc;
  color: #fff
}


</style>